// MindMate 设计令牌系统
export const tokens = {
  // 色彩系统 - 极简黑白灰设计
  colors: {
    // 单一强调色 - 现代蓝（类似腾讯元宝）
    accent: {
      50: '#f0f9ff',
      100: '#e0f2fe',
      200: '#bae6fd',
      300: '#7dd3fc',
      400: '#38bdf8',
      500: '#0ea5e9',  // 主强调色
      600: '#0284c7',
      700: '#0369a1',
      800: '#075985',
      900: '#0c4a6e',
    },
    
    // 黑白灰系统 - 主要配色方案
    neutral: {
      0: '#ffffff',     // 纯白
      50: '#fafafa',    // 极浅灰
      100: '#f5f5f5',   // 浅灰背景
      200: '#e5e5e5',   // 边框灰
      300: '#d4d4d4',   // 分割线灰
      400: '#a3a3a3',   // 辅助文字灰
      500: '#737373',   // 次要文字灰
      600: '#525252',   // 主要文字灰
      700: '#404040',   // 深文字灰
      800: '#262626',   // 标题黑灰
      900: '#171717',   // 纯黑文字
      950: '#0a0a0a',   // 最深黑
    },
    
    // 语义色 - 简化版本
    semantic: {
      success: '#22c55e',   // 成功绿
      warning: '#f59e0b',   // 警告橙  
      error: '#ef4444',     // 错误红
      info: '#0ea5e9',      // 信息蓝（与accent统一）
    },
    
    // 背景色系统
    background: {
      primary: '#ffffff',    // 主背景（纯白）
      secondary: '#fafafa',  // 次级背景（极浅灰）
      tertiary: '#f5f5f5',   // 三级背景（浅灰）
      elevated: '#ffffff',   // 悬浮背景（白色卡片）
      overlay: 'rgba(0, 0, 0, 0.5)',  // 蒙层背景
    },
    
    // 文字色系统
    text: {
      primary: '#171717',    // 主要文字（深黑）
      secondary: '#525252',  // 次要文字（中灰）
      tertiary: '#a3a3a3',   // 辅助文字（浅灰）
      inverse: '#ffffff',    // 反色文字（白色）
      accent: '#0ea5e9',     // 强调文字（蓝色）
    },
    
    // 边框色系统
    border: {
      light: '#f5f5f5',     // 极浅边框
      default: '#e5e5e5',   // 默认边框
      medium: '#d4d4d4',    // 中等边框
      strong: '#a3a3a3',    // 强边框
    }
  },

  // 间距系统
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '12px',
    lg: '16px',
    xl: '20px',
    '2xl': '24px',
    '3xl': '32px',
    '4xl': '40px',
    '5xl': '48px',
    '6xl': '64px',
  },

  // 字体系统
  typography: {
    fontFamily: {
      primary: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif',
      mono: '"SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace',
    },
    fontSize: {
      xs: '12px',
      sm: '14px',
      base: '16px',
      lg: '18px',
      xl: '20px',
      '2xl': '24px',
      '3xl': '30px',
      '4xl': '36px',
    },
    fontWeight: {
      normal: '400',
      medium: '500',
      semibold: '600',
      bold: '700',
    },
    lineHeight: {
      tight: '1.25',
      normal: '1.5',
      relaxed: '1.75',
    },
  },

  // 圆角系统
  borderRadius: {
    none: '0',
    sm: '4px',
    md: '8px',
    lg: '12px',
    xl: '16px',
    '2xl': '20px',
    full: '9999px',
  },

  // 阴影系统
  boxShadow: {
    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  },

  // 动画系统
  animations: {
    duration: {
      fast: '150ms',
      normal: '300ms',
      slow: '500ms',
    },
    easing: {
      easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
      easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
      easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
    },
  },

  // Z-Index 层级
  zIndex: {
    dropdown: 1000,
    sticky: 1020,
    fixed: 1030,
    modal: 1040,
    popover: 1050,
    tooltip: 1060,
  },
}

// 导出CSS变量形式的令牌
export const cssVariables = `
  :root {
    /* 强调色 - 蓝色系 */
    --color-accent-50: ${tokens.colors.accent[50]};
    --color-accent-100: ${tokens.colors.accent[100]};
    --color-accent-200: ${tokens.colors.accent[200]};
    --color-accent-500: ${tokens.colors.accent[500]};
    --color-accent-600: ${tokens.colors.accent[600]};
    --color-accent-700: ${tokens.colors.accent[700]};
    
    /* 中性色 - 黑白灰系 */
    --color-neutral-0: ${tokens.colors.neutral[0]};
    --color-neutral-50: ${tokens.colors.neutral[50]};
    --color-neutral-100: ${tokens.colors.neutral[100]};
    --color-neutral-200: ${tokens.colors.neutral[200]};
    --color-neutral-300: ${tokens.colors.neutral[300]};
    --color-neutral-400: ${tokens.colors.neutral[400]};
    --color-neutral-500: ${tokens.colors.neutral[500]};
    --color-neutral-600: ${tokens.colors.neutral[600]};
    --color-neutral-700: ${tokens.colors.neutral[700]};
    --color-neutral-800: ${tokens.colors.neutral[800]};
    --color-neutral-900: ${tokens.colors.neutral[900]};
    --color-neutral-950: ${tokens.colors.neutral[950]};
    
    /* 背景色 */
    --bg-primary: ${tokens.colors.background.primary};
    --bg-secondary: ${tokens.colors.background.secondary};
    --bg-tertiary: ${tokens.colors.background.tertiary};
    --bg-elevated: ${tokens.colors.background.elevated};
    --bg-overlay: ${tokens.colors.background.overlay};
    
    /* 文字色 */
    --text-primary: ${tokens.colors.text.primary};
    --text-secondary: ${tokens.colors.text.secondary};
    --text-tertiary: ${tokens.colors.text.tertiary};
    --text-inverse: ${tokens.colors.text.inverse};
    --text-accent: ${tokens.colors.text.accent};
    
    /* 边框色 */
    --border-light: ${tokens.colors.border.light};
    --border-default: ${tokens.colors.border.default};
    --border-medium: ${tokens.colors.border.medium};
    --border-strong: ${tokens.colors.border.strong};
    
    /* 语义色 */
    --color-success: ${tokens.colors.semantic.success};
    --color-warning: ${tokens.colors.semantic.warning};
    --color-error: ${tokens.colors.semantic.error};
    --color-info: ${tokens.colors.semantic.info};
    
    /* 字体 */
    --font-primary: ${tokens.typography.fontFamily.primary};
    --font-mono: ${tokens.typography.fontFamily.mono};
    
    /* 间距 */
    --spacing-xs: ${tokens.spacing.xs};
    --spacing-sm: ${tokens.spacing.sm};
    --spacing-md: ${tokens.spacing.md};
    --spacing-lg: ${tokens.spacing.lg};
    --spacing-xl: ${tokens.spacing.xl};
    --spacing-2xl: ${tokens.spacing['2xl']};
    --spacing-3xl: ${tokens.spacing['3xl']};
    
    /* 动画 */
    --animation-fast: ${tokens.animations.duration.fast};
    --animation-normal: ${tokens.animations.duration.normal};
    --animation-slow: ${tokens.animations.duration.slow};
    --ease-out: ${tokens.animations.easing.easeOut};
    --ease-in: ${tokens.animations.easing.easeIn};
    --ease-in-out: ${tokens.animations.easing.easeInOut};
  }
`

export default tokens